import React from "react";

import { useTranslation } from 'react-i18next';

import FormInput from "../FormInput";

import { tableTitles } from "../utils/table";

import type { IChangeFormsProps } from "../../interfaces";
import type { InputEvent } from "../../types";

const ChangeForms = ({ formValues, setFormValues }: IChangeFormsProps): JSX.Element => {
  const { pacient, doctor, date, complaint } = formValues;
  
  const { t } = useTranslation();

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormValues((prev) => {
      return {
        ...prev,
        [name]: value,
      };
    });
  };

  return (
    <div>
      {
        tableTitles.map((item) => {
          return <FormInput title={t(item.title)} value={item.value} onChange={handleChange} />;
        });
      }
    </div>
  );
};

export default ChangeForms;